 /*
 * @description: 二维码弹窗
 * @Author: along
 * @Date: 2021-09-15
 * @Last Modified by: along
 * @Last Modified time: 2021-09-15
 */
<template>
    <el-dialog
        :title="TYPE == 'add' ? '新建弹窗' : '更换弹窗'"
        :visible.sync="dialogVisible"
        width="640px"
        :close-on-click-modal="false"
        class="remarkDialog"
    >
        <div class="_model">
            <div class="__items">
                <p class="__items_name">
                    二维码图片
                </p>
                <div class="__items_wrap">
                    <div
                        v-if="!formData.qrcode"
                        class="__items_none"
                    >
                        <img
                            src="https://cdn.zsdx.cn/student-app/images/popup-qrocde.png"
                            class="__items_none_image"
                        >
                    </div>
                    <div
                        v-if="formData.qrcode"
                        :style="{
                            backgroundImage: `url(${formData.qrcode})`,
                            backgroundSize: 'cover'
                        }"
                        class="__items_none"
                    />
                    <el-upload
                        :show-file-list="false"
                        :http-request="e=> {fnUploadImageOfGoods(e, true)}"
                        accept="image/*"
                        class="upload-good-image"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :style="{width: '100px', height: '100px'}"
                    />
                </div>
                <p class="__items_desc">
                    图片尺寸：宽度= 590px，高度≤942px
                </p>
            </div>

            <div
                class="__items"
                :style="{marginTop: '24px'}"
            >
                <p class="__items_title">
                    弹窗位置
                </p>
                <el-select
                    v-model="formData.popup_pos"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    :style="{width: '438px', marginLeft: '12px'}"
                >
                    <el-option
                        v-for="item in posList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>

            <div
                class="__items"
                :style="{marginTop: '24px'}"
            >
                <p class="__items_title">
                    触发条件
                </p>
                <el-select
                    v-model="formData.condition"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    :style="{width: '438px', marginLeft: '12px'}"
                >
                    <el-option
                        v-for="item in condList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>

            <div
                class="__items"
                :style="{marginTop: '24px'}"
            >
                <p class="__items_title">
                    要求等级
                </p>
                <el-select
                    v-model="formData.leavel"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    :style="{width: '438px', marginLeft: '12px'}"
                >
                    <el-option
                        v-for="item in leavelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                size="small"
                type="default"
                @click="dialogVisible = false"
                :style="{width: '100px', marginRight: '60px'}"
            >
                取 消
            </el-button>
            <el-button
                size="small"
                type="primary"
                @click="confirm()"
                :style="{width: '100px'}"
            >
                确 定
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            TYPE: 'add',//add: 新建 edit: 修改
            dialogVisible: false,
            formData: {
                qrcode: '',
                popup_pos: 0,
                condition: 99,
                leavel: 99
            },
            popup_no: '',
            posList: [{value: 0,label: '请选择'},{value: 1,label: 'app加载时'},{value: 2,label: '商城模块'},{value: 4,label: '工作模块'},{value: 8,label: '社交模块'},{value: 16,label: '个人中心模块'}],
            condList: [{value: 99,label: '请选择'},{value: 0,label: '直接展示'},{value: 1,label: '精英升级'}],
            leavelList: [{value: 99,label: '请选择'},{value: 0,label: 'E0'},{value: 1,label: 'E1'},{value: 2,label: 'E2'},{value: 3,label: 'E3'},{value: 4,label: 'E4'},{value: 5,label: 'E5'}],
        };
    },
    methods: {
        show (obj) {
            this.TYPE = obj.type;

            if(this.TYPE == 'edit') {
                this.formData = {
                    qrcode: obj.row.image_url,
                    popup_pos: obj.row.scope[0],
                    condition: obj.row.event_type,
                    leavel: obj.row.require_stuagent_level
                };
                this.popup_no = obj.row.popup_no;
            } else {
                this.formData = {
                    qrcode: '',
                    popup_pos: 0,
                    condition: 99,
                    leavel: 99
                };
                this.popup_no = '';
            }

            this.dialogVisible = true;
        },
        close () {
            this.dialogVisible = false;
        },
        confirm () {
            if(!this.formData.qrcode) {
                this.$notify({
                    title: '提示',
                    message: '请上传二维码图片',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(this.formData.popup_pos === 0) {
                this.$notify({
                    title: '提示',
                    message: '请选择弹窗位置',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(this.formData.condition === 99) {
                this.$notify({
                    title: '提示',
                    message: '请选择触发条件',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(this.formData.leavel === 99) {
                this.$notify({
                    title: '提示',
                    message: '请选择要求等级',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$emit('confirm', {
                ...this.formData,
                type: this.TYPE,
                popup_no: this.popup_no
            });
            this.close();
        },

        /**
         * 上传图片
         */
        fnUploadImageOfGoods(e) {
            this.fnUploadImage(e, (resp) => {

                var img = new Image();

                img.src = resp.data.url;

                img.onload = () => {
                    if(Number(img.height) > 942) {
                        this.$notify({
                            title: '提示',
                            message: `二维码图片高度最高为942,当前高度为${img.height}`,
                            type: 'warning',
                            duration: 2000
                        });
                    } else {
                        this.formData.qrcode = resp.data.url;
                    }
                    console.log('width:'+img.width+',height:'+img.height);
                };

            }, (resp) => {
                console.log(resp.msg);
            });
        },

        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.remarkDialog {
    ._model {
        width: 100%;
        display: flex;
        flex-direction: column;
        .__items {
            width: 100%;
            display: flex;
            align-items: flex-start;
            .__items_name {
                width: 80px;
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                text-align: right;
                white-space: nowrap;
                position: relative;
                height: 100px;
                box-sizing: border-box;
                padding-top: 11px;
                &::before {
                    content: '*';
                    color: rgba(249, 91, 86, 1);
                    font-size: 14px;
                    position: absolute;
                    top: 10px;
                    left: 4px;
                }
            }
            .__items_title {
                width: 80px;
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                text-align: right;
                white-space: nowrap;
                position: relative;
                box-sizing: border-box;
                padding-top: 11px;
                &::before {
                    content: '*';
                    color: rgba(249, 91, 86, 1);
                    font-size: 14px;
                    position: absolute;
                    top: 10px;
                    left: 15px;
                }
            }
            .__items_wrap {
                width: 100px;
                height: 100px;
                overflow: hidden;
                margin-left: 12px;
                margin-right: 16px;
                cursor: pointer;
                position: relative;
                .__items_none {
                    width: 100px;
                    height: 100px;
                    position: relative;
                    .__items_none_image {
                        width: 100px;
                        height: 100px;
                    }
                }
            }
            .__items_desc {
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                white-space: nowrap;
                box-sizing: border-box;
                padding-top: 44px;
            }
        }
    }
    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
}
</style>

<style lang="less">
.remarkDialog {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 32px 64px 24px 64px;
    }
    .el-textarea__inner {
        resize: none;
    }
    .upload-good-image {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        .el-upload {
            width: 100px;
            height: 100px;
        }
    }
}
</style>